- DOM 是甚麼 ? -- 可以把 html 轉為物件形式,讓他可以跟瀏覽器溝通
一些跟瀏覽器溝通的東西
getElementsByTagName('')
: 選取對應標籤名稱的元素
ex. getElementByTagName('div')getElementsByClassName('')
: 選取對應class名稱的元素
ex. getElementByClassName('block') (不用有點.)getElementById('')*
: 選取對應id名稱的元素(id只有一個,所以 Element 不加s)querySeletor('')*
: css 選擇器,用 css 的寫法去選擇元素(只能選到一第一個)
ex.querySeletor('.block') (css怎麼寫就怎麼寫,最直覺)querySeletorAll('')*
: css 選擇器,用 css 的寫法去選擇所有對應的元素(可以選到全部).getAttribute('')
:取得屬性
ex. 選取元素時用元素的屬性去選 e.target.getAttribute('data-value')
一些變動 CSS 的方法
* element.style.css的屬性 = ' '
(不建議用會很亂)
ex. element.style.padding = '10px' 或是 element.style['padding']
element.classList.add(' ')
: 添增 class 在元素上(先寫好 class 的 CSS就可以讓元素添加 css)
ex. element.classList.add('.block')element.classList.remove(' ')
: 移除在元素上原本的 classelement.classList.toggle(' ')
: 切換元素上的 classelement.closest('')
:離元素最近的某個東西
ex. e.target.closest('.row') 離目標元素最近的 .row 的東西
一些 html 的東西
element.innerHTML
:所選元素標籤裡面的所有 html 的部分element.innerText = ' '
:標籤裡面所以文字的部分element.outerHTML
:包含所選元素的標籤的所有 html 的部分element.appendChild()
:在元素上的子元素上添加東西element.removeChild()
:移除元素的字元素的東西document.createElement('')
:建立元素document.createTextNode('')
:建立文字
一些事件的東西
element.addEventListener('動作', function)
:事件監聽 (function 可以另外先寫好,也可以寫在裡面變成匿名函式)
ex. element.addEventListener('click', onClick)e.preventDefault()
:阻止預設的動作element.contains('')
:event delegation 事件代理
ex. e.target.classList.contains('btn')e.currentTarget()
:觸發事件的 eventListener 所屬元素e.target()
:觸發事件的元素本身